<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .current {
            color: greenyellow;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 作用域插槽所解决的问题：让父组件决定子组件在哪高亮 -->
        <!-- 填充插槽 -->
        <con-a :list='list'>
            <!-- 得到子组件中的数据 -->
            <template slot-scope="slotScopes">
<strong v-if='slotScopes.info == "banner" ' class="current">{{slotScopes.info}}</strong>
    <strong v-else >{{slotScopes.info}}</strong>
</template>
        </con-a>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    // 子组件
    Vue.component('con-a', {
        props: ['list'],
        data: function() {
            return {
                msg: 1233
            }
        },
        // 插槽定义
        template: `<div>
         {{msg}}   
            <ul>
                <li :key='index' v-for='(item,index) in list'>  
                    <slot :info='item'>{{item}}</slot>
                    </li>
                </ul>
            </div>`,
        methods: {

        },
    })

    var vm = new Vue({
        el: '#app',
        data: {
            list: ['apple', 'banner', 'lemon']
        },
        methods: {

        },
    })
</script>

</html>5